<%@page import="com.qf.myschool.vo.LoginUserVo"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
			form{
				width: 600px;
				height: auto;
				margin: 0px auto;
				border: solid 1px red;
			}
		</style>
		<script type="text/javascript">
			
			//验证原密码
			function isOldPwd(){
				//获得用户输入的原密码
				var oldPwd=document.getElementById("oldPwd").value;
				//获得当前用户登录的密码
				var old=document.getElementById("old").value;
				
				if(old==oldPwd){
					document.getElementById("oldPwd1").innerHTML="";
					return true;
				}else{
					document.getElementById("oldPwd1").style.color="red";
					document.getElementById("oldPwd1").innerHTML="原密码输入有误!";
					return false;
				}
			}
			
			//验证新密码和确认新密码
			function isReNewPwd(){
				//获得用户输入的新密码
				var newPwd=document.getElementById("newPwd").value;
				//获得用户输入的确认的新密码
				var reNewPwd=document.getElementById("reNewPwd").value;
				//获得当前用户登录的密码
				var old=document.getElementById("old").value;
				//密码正则表达式
				var regPwd=/^\d{6}$/;
				if(reNewPwd==old){
					document.getElementById("reNewPwd1").style.color="red";
					document.getElementById("reNewPwd1").innerHTML="新密码不能和原密码相同!";
					return false;
				}else if(regPwd.test(reNewPwd)&&newPwd==reNewPwd){
					document.getElementById("reNewPwd1").innerHTML="";
					return true;
				}else{
					document.getElementById("reNewPwd1").style.color="red";
					document.getElementById("reNewPwd1").innerHTML="新密码输入有误或两次新密码输入不一致!";
					return false;
				}
			}
			
			//表单提交事件
			function check(){
				//验证用户名结果
				var oldPwd=isOldPwd();
				//验证密码结果
				var newPwd=isReNewPwd();
				
				//表单的所项符合要求就要提交表单,否则阻止表单提交
				if(oldPwd&&newPwd){
					return true;
				}else{
					return false;
				}
			}
			
		</script>
</head>
<body>
	<!--表单-->
	<form method="post" action="CommonServlet?method=modifyPwd" onsubmit="return check()">
		<table>
			<tr>
				<td></td>
				<td><h1>修改密码页面</h1></td>
				<!-- 巧用隐藏域将密码存在html页面中,方便js获得原密码 -->
				<td><input type="hidden" id="old" name="old" value="${stu.password }"/></td>
			</tr>
			<tr>
				<td>原密码:</td>
				<!-- 表达式,在浏览中输出变量的值 -->
				<td><input type="password" id="oldPwd" name="oldPwd" onblur="isOldPwd()" /></td>
				<td id="oldPwd1">原密码必填项</td>
			</tr>
			<tr>
				<td>新密码:</td>
				<!-- 表达式,在浏览中输出变量的值 -->
				<td><input type="password" id="newPwd" name="newPwd" /></td>
				<td id="newPwd1">必填项,6位数字</td>
			</tr>
			<tr>
				<td>确认新密码:</td>
				<!-- 表达式,在浏览中输出变量的值 -->
				<td><input type="password" id="reNewPwd" name="reNewPwd" onblur="isReNewPwd()" /></td>
				<td id="reNewPwd1">必填项,6位数字</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<!--提交按纽-->
					<input type="submit" value="修改"/>
					<!--重置按纽-->
					<input type="reset" value="重置"/>
				</td>
				<td></td>
			</tr>
		</table>
	</form>
</body>
</html>